<template>
  <div class="base-information-one">
    <div class="button-link-group clearfix">
      <div class="button-link-item">
        <span @click="unbundling">{{$t('webchat.disassociation')}}</span>
      </div>
      <div class="button-link-item history" v-if="isAdmin || !isHasFuncShow('func_contact_history')" @click="showHistoryFun">
        <span>{{$t('public.history')}}</span>
      </div>
      <div class="webchat_baseinfo_history" v-show="showContactHisory" :class="{ 'layout' : showContactHisory, 'layin': !showContactHisory}">
        <span class="el-icon-close" @click="hidePopover"></span>
        <ContactHistory
                :cid="customer ? customer._id: ''"
                type="webchatNewHistory"
                :refresh="contactHistoryRefresh"
                @hidePopover="hidePopover"/>
      </div>
      <div @click="contactPlan" class="button-link-item">
        <span>{{$t('public.contactPlan')}}</span>
      </div>
      <div class="button-link-item" v-if="isAdmin || !isHasFuncShow('func_operation_log')" @click="showOperationFun">
        <span>{{$t('public.changeLog')}}</span>
      </div>
      <div class="webchat_baseinfo_operation" v-show="showOperation" :class="{ 'layout' : showOperation, 'layin': !showOperation}">
        <span class="el-icon-close" @click="hidePopover"></span>
        <OperationLog
          v-if="showOperation"
          :cid="customer ? customer._id: ''"
          :refresh="operationRefresh"
          type="webchatNewOperation"
          @hidePopover="hidePopover"/>
      </div>

    </div>

    <div class="information" v-if="!loading">
      <!-- 客户姓名 -->
      <div class="item clearfix">
        <div class="label">{{showItem.name}}</div>
        <div class="value" v-show="!editShow.name">
          <span>{{custName}}</span>
          <i class="edit iconfont icon-gengxinkehu" v-if="custName ? !noUpdate.name && isAllowEditCustomerInfo : true" @click="showEditName"></i>
        </div>
        <div class="value-input" v-show="editShow.name">
          <el-form ref="nameForm" @submit.native.prevent :model="editValues" :rules="rules" class="quick-edit-form">
            <el-form-item prop="name">
              <el-input ref="nameInput" size="mini" v-model="editValues.name" @blur="editName" @keyup.enter.native="editName"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 客户状态 -->
      <div class="item clearfix">
        <div class="label">{{$t('customer.custStatus')}}</div>
        <div class="value" v-show="!editShow.status">
          <span>{{custStatus}}</span>
          <i class="edit iconfont icon-gengxinkehu" v-if="isAllowEditStatus"  @click="showEditStatus"></i>
        </div>
        <div class="value-input" v-show="editShow.status">
          <el-select size="mini" v-model="editValues.status" ref="statusSelect" :placeholder="$t('public.pleasePick')" @blur="editShow.status=false" @change="editStatus">
            <el-option
              v-for="(name, key) in status"
              :key="key"
              :label="name"
              :value="key">
            </el-option>
          </el-select>
        </div>
      </div>

      <!-- 客户描述 -->
      <div class="item clearfix" v-show="showItem.title">
        <div class="label">{{showItem.title}}</div>
        <div class="value" v-show="!editShow.title">
          <span>{{custTitle}}</span>
          <i class="edit iconfont icon-gengxinkehu" v-if="custTitle ? !noUpdate.title && isAllowEditCustomerInfo : true"  @click="showEditTitle"></i>
        </div>
        <div class="value-input" v-show="editShow.title">
          <el-form ref="titleForm" @submit.native.prevent :model="editValues" :rules="rules" class="quick-edit-form">
            <el-form-item prop="title">
              <el-input ref="titleInput" type="textarea" :autosize="true" resize="none" size="mini" v-model="editValues.title" @blur="editTitle" @keyup.alt.enter.native="editTitle"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--客户归属-->
      <div class="item clearfix">
        <div class="label">
          {{$t('customer.customerOwner')}}
        </div>
        <div class="value"  v-show="!editShow.owner">
          <span>{{custOwner}}</span>
          <i class="edit iconfont icon-gengxinkehu" v-if="isAllowEditOwner"  @click="showEditOwner"></i>
        </div>
        <div class="value-input" v-if="isAllowEditOwner && editShow.owner">
          <customer-owner-select
            class="cust-owner__select"
            rangeType="customerSlot"
            :expand="true"
            :widthSize="120"
            :placeholder="$t('public.pleasePick')"
            :categoryId="customer ? customer.categoryId: null"
            :owner="customer ? customer.owner: null"
            @ownerChange="handleOwnerChange"
            @visible-change="handleOwnerVisibleChange">
          >
          </customer-owner-select>
        </div>
      </div>

      <!--联系方式-->
      <div class="item clearfix 1111">
        <div class="label">{{showItem.phone}}</div>
        <div class="value value-phone">
          <span>
            <template v-for="(phone,index) in custPhones">
              <div  class="phone" :key="index">
                <div class="tel">
                  <span>{{isHideTel? hideTel(phone.tel) : phone.tel}}</span><span v-if="phone.area">({{phone.area}})</span>
                  <span v-if="isSMS" >
                    <el-tooltip effect="dark" :content="$t('public.monitorVerTip')" :openDelay="200" transition="fade-leave" placement="bottom" v-if="isMonitorVersion">
                      <i class="iconfont icon-duanxin1" v-if="isMonitorVersion" style="cursor: not-allowed"></i>
                    </el-tooltip>
                    <i class="iconfont icon-duanxin1" v-else @click.stop="calling(phone.tel,'tlak')"></i>
                  </span>
                  <i class="iconfont icon-dadianhua" @click="calling(phone.tel,'call')" v-if="flag === 'kf'"></i>
                </div>
                <div class="memo" :title="phone.memo">
                  <span>{{phone.memo}}</span>
                  <!-- <el-tooltip class="item" effect="dark" :content="phone.memo" placement="top">
                    <span>{{phone.memo}}</span>
                  </el-tooltip> -->
                </div>
              </div>
            </template>
          </span>
          <span v-if="custPhones[0] && custPhones[0].tel ? !noUpdate.phone && isAllowEditCustomerInfo : true" class="edit-wrap">
            <i class="edit iconfont icon-gengxinkehu" @click="openEditPhoneDialog"></i>
          </span>
        </div>
      </div>
      <div class="more-button" @click="addCustomer" v-show="isAllowEditCustomerInfo">{{$t('webchat.updateCustomer')}}</div>
    </div>
    <EditPhoneDialog :showItem="showItem" ref="editPhoneDialog" :rules="rules" @submit="editPhoneSubmit"/>
  </div>
</template>

<script>
import bus from 'src/store/eventBus'
import { isHasFunc } from '@/utils/m7Utils'

import {
  isNotAllowEditCustomerInfo,
  isNotAllowEditStatus,
  isNotAllowEditSource,
  isNotAllowEditOwner,
  isAllowPopupEditNoOwnerCustomer,
  isHideTel,
  notUpdateCustomerField
} from 'src/utils/customerUtils.js'

import {
  getCache,
  utilExtend,
  checkHideTel
} from 'src/utils/m7Utils.js'

import { isEmpty } from 'lodash'
import CustomerOwnerSelect from '@/components/business-modules/customer/CustomerOwnerSelect.vue'
import ContactHistory from '@/components/public-modules/cust-tab-content/contact-history/index.vue'
import OperationLog from '@/components/public-modules/cust-tab-content/operation-log/index.vue'
import EditPhoneDialog from './dialog/EditPhoneDialog.vue'
import * as globalTypes from 'src/store/mutation-types'

export default {
  name: 'BaseInformationOne',
  components: {
    CustomerOwnerSelect,
    EditPhoneDialog,
    ContactHistory,
    OperationLog
  },
  data () {
    return {
      flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
      isMonitorVersion: false,
      loading: true,
      rules: {},
      status: {},
      source: [],
      agents: [],
      custCategorys: [],
      showItem: {},
      noUpdate: {name: false, title: false, phone: false},
      operationRefresh: 'changeLog',
      contactHistoryRefresh: 'history',
      showOperation: false,
      showContactHisory: false,
      editShow: {
        name: false,
        status: false,
        title: false,
        source: false,
        owner: false
      },
      editValues: {
        name: '',
        status: '',
        title: '',
        source: '',
        owner: ''
      },
      isSMS: false
    }
  },
  props: {
    customer: {
      type: Object,
      default: function () {
        return {}
      }
    },
    currentBusinessObj: Object
  },
  watch: {
    customerId () {
      this.hidePopover()
    }
  },
  computed: {
    customerId () {
      return this.customer._id || ''
    },
    isAdmin () {
      return this.$store.state.session.user.isAdmin
    },
    isHideTel () {
      return isHideTel(this.$store.state.session.user)
    },
    custTitle () {
      return this.customer ? this.customer.title : ''
    },
    custName () {
      return this.customer ? this.customer.name : ''
    },
    custPhones () {
      // 批量导入客户的时候，没有选择关联电话号码，导致phone字段缺失
      if (this.customer && this.customer.phone) {
        return this.customer.phone
      } else {
        return []
      }
    },
    custStatus () {
      let cs = this.customer && this.status ? this.status[this.customer.status] : ''
      if (this.status[this.customer.status]) {
        return cs
      } else {
        return this.$t('customer.deleteStatus')
      }
    },
    custSource () {
      if (this.customer) {
        for (let i = 0; i < this.source.length; i++) {
          if (this.source[i].key === this.customer.custsource1) {
            return this.source[i].name
          }
        }
        return this.$t('customer.noSource')
      }
      return this.$t('customer.customerSlot.custSource')
    },
    custOwner () {
      if (this.customer) {
        var agents = this.agents
        var owner = this.customer.owner

        for (let i = 0; i < agents.length; i++) {
          if (agents[i]._id === owner) {
            return agents[i].displayName
          }
        }

        var custCategorys = this.custCategorys
        var categoryId = this.customer.categoryId

        for (let i = 0; i < custCategorys.length; i++) {
          if (custCategorys[i]._id === categoryId) {
            return custCategorys[i].cName
          }
        }
      }
      return this.$t('customer.noOwner')
    },
    isAllowEditCustomerInfo () {
      let user = this.$store.state.session.user
      if (isHasFunc('func_not_allow_edit_owner_is_others_customer', user)) {
        if (user.type === 'admin' && user.exten === '0000') {
          return true
        } else if (this.customer.owner !== user._id) {
          return false
        }
      }
      if (this.customer.owner === 'NA') {
        return true
      }
      return !isNotAllowEditCustomerInfo(this.$store.state.session.user, this.customer.owner)
    },
    isAllowEditStatus () {
      return this.isAllowEditCustomerInfo && !isNotAllowEditStatus(this.$store.state.session.user)
    },
    isAllowEditSource () {
      return this.isAllowEditCustomerInfo && !isNotAllowEditSource(this.$store.state.session.user)
    },
    isAllowPopupEdit () {
      return isAllowPopupEditNoOwnerCustomer(this.$store.state.session.user)
    },
    isAllowEditOwner () {
      let user = this.$store.state.session.user
      let scope = user.scope.customer
      // 禁止修改归属
      if (isNotAllowEditOwner(user)) {
        return false
      }
      // 无归属的客户，有'所有人'数据权限或弹屏时有'弹屏可修改无归属的客户'权限的才能修改
      if (this.customer.categoryId === 'NA' && this.customer.owner === 'NA') {
        if (scope === 'all' || this.isAllowPopupEdit) {
          return true
        }
        return false
      }

      // 有归属的客户，数据权限为all或者所属人是我或我的下属或为公海管理员能修改
      let category = getCache('custCategorys', this.customer.categoryId)
      if (user.moduleUsers.customer === 'all' || (user.moduleUsers.customer && user.moduleUsers.customer.indexOf(this.customer.owner) !== -1) || (category && category.managers && category.managers.indexOf(user._id) !== -1)) {
        return true
      }

      return false
    },
    isAllowChoseNoOwner () {
      return this.$store.state.session.user.scope.customer === 'all'
    }
  },
  methods: {
    isEditPhone () {
      if (notUpdateCustomerField(this.$store.state.session.user) && this.custPhones[0] && this.custPhones[0].tel) {}
    },
    isHasFuncShow (key) {
      return isHasFunc(key, this.$store.state.session.user)
    },
    hideTel (tel) {
      return checkHideTel(tel, this.$store.state.session.user)
    },
    unbundling () {
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-取消关联客户'])
      this.$confirm(this.$t('public.unlinkCustomerPrompt'), this.$t('public.tip'), {
        confirmButtonText: this.$t('public.confirm'),
        cancelButtonText: this.$t('public.cancel'),
        cancelButtonClass: 'primary_btn',
        confirmButtonClass: 'primary_btn',
        type: 'warning'
      }).then(() => {
        this.unbundlingFun()
      }).catch(() => {})
    },
    unbundlingFun () {
      let sName = ''
      let sessionId = this.$route.path.split('/')[4]
      let tabType = this.$route.path.split('/')[3] || ''
      if (tabType === 'webchat_todo') {
        sName = this.$store.state.webchat.current[tabType].chatInfoById[sessionId].sName
      } else if (tabType === 'webchat_all' || tabType === 'webchat_robot' || tabType === 'webchat_laterProcess' || tabType === 'webchat_queue') {
        sName = this.$store.state.webchat.current[tabType].chatInfoById.sName
      }

      let sid = null
      if (tabType === 'webchat_todo') {
        sid = this.$store.state.webchat.current[tabType].currentSession[sessionId].sid || ''
      } else {
        sid = this.$store.state.webchat.current[tabType].currentSession.sid || ''
      }

      this.$store.dispatch('deleteCustomerImRelation', {customerId: this.customer._id, sessionId: sessionId, sid: sid, sName: sName}).then((res) => {
        bus.$emit('changeCusComponents')  // 更新添加客户组件
        bus.$emit('changeCusSource')  // 更新客户的来源
        bus.$emit('changeCusStatus')  // 更新客户的状态
        bus.$emit('changeCusOwner')  // 更新客户的归属
        bus.$emit('changeCascader')  // 更新级联选项事件
      })
    },
    addCustomer () {
      this.$store.dispatch('queryCustomerInfo', { _id: this.customerId }).then((data) => {
        this.$store.commit(globalTypes.UPDATE_CUSTOMER_INFO, {data: data})
        this.$nextTick(() => {
          this.$emit('openAddCustomerSubPanel')
        })
      })
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-右侧更新客户'])
    },
    // TODO 座席权限控制和公海
    fetchData () {
      this.loading = true
      this.noUpdate = { name: false, title: false, phone: false }
      let p1 = this.$store.dispatch('getCache', { type: 'custTmpls' })
      let p2 = this.$store.dispatch('getCache', { type: 'agents' })
      let p3 = this.$store.dispatch('getCache', { type: 'custCategorys' })
      let p4 = this.$store.dispatch('getCache', { type: 'options', id: 'd7b9c68a-b50f-21d1-d5fd-41ea93f5f49c' })
      Promise.all([p1, p2, p3, p4]).then(([custTmpls, agents, custCategorys]) => {
        let custTmpl = custTmpls[0] || []
        let statusConfig = custTmpl.statusConfig || {}
        let status = JSON.parse(JSON.stringify(custTmpl.status))
        // this.stutasSelect = JSON.parse(JSON.stringify(custTmpl.status))
        if (statusConfig) {
          for (let key in status) {
            if (statusConfig[key] && statusConfig[key].status !== 'enabled') {
              delete status[key]
            }
          }
        }

        let stableFields = custTmpl.stable_fields
        stableFields.forEach(ele => {
          this.showItem[ele.name] = ele.value
          if (ele.name === 'phone' || ele.name === 'weixin' || ele.name === 'email') {
            this.showItem[ele.name + 'Memo'] = ele.value + this.$t('public.remark')
          }

          if (
            ele.name === 'name' ||
            ele.name === 'title' ||
            ele.name === 'phone'
          ) {
            if (ele.required === 'required') {
              if (ele.name === 'phone') {
                this.rules['custPhones'] = [{required: true, message: this.$t('public.pleaseInput') + ele.value, trigger: 'blur'}]
                this.rules['custPhones'][0].validator = validatePhone
              } else {
                this.rules[ele.name] = [{required: true, message: this.$t('public.pleaseInput') + ele.value, trigger: 'change'}]
              }
            }
            if (notUpdateCustomerField(this.$store.state.session.user) && ele.noupdate === true) {
              // 当为数组时 判断若为空则可继续填选
              this.$set(this.noUpdate, ele.name, true)
//              if (this.customer[ele.name] && this.customer[ele.name].length === 0) {
//                this.$set(this.noUpdate, ele.name, false)
//              }
            }
          }
        })
        this.status = !isEmpty(status) ? status : null
        this.source = custTmpls[0].source || []
        this.agents = agents || []
        this.custCategorys = custCategorys
        this.loading = false
      })
    },
    showEditName () {
      this.editShow.name = true
      this.editValues.name = this.custName
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-客户名称快捷修改'])
      this.$nextTick(() => {
        this.$refs.nameInput.focus()
      })
    },
    editName () {
      this.$refs.nameForm && this.$refs.nameForm.validate((valid) => {
        if (valid) {
          if (this.editValues.name !== this.custName) {
            let data = {
              _id: this.customer._id,
              name: this.editValues.name
            }

            this.$store.dispatch('updateCustomerNameDespOrPhone', data).then(() => {
              this.editShow.name = false
              bus.$emit('changeCusComponents')
            }).catch(() => {
              this.editShow.name = false
            })
          } else {
            this.editShow.name = false
          }
        } else {
          this.$message({
            type: 'error',
            message: this.$t('public.pleaseEnterRequireItem')
          })

          this.$nextTick(() => {
            this.$refs.nameInput.focus()
          })
        }
      })
    },
    showEditTitle () {
      this.editShow.title = true
      this.editValues.title = this.custTitle
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-客户描述快捷修改'])
      this.$nextTick(() => {
        this.$refs.titleInput && this.$refs.titleInput.focus()
      })
    },
    editTitle () {
      this.$refs.titleForm && this.$refs.titleForm.validate((valid) => {
        if (valid) {
          if (this.editValues.title !== this.custTitle) {
            let data = {
              _id: this.customer._id,
              title: this.editValues.title
            }

            this.$store.dispatch('updateCustomerNameDespOrPhone', data).then(() => {
              this.editShow.title = false
              bus.$emit('changeCusComponents')
            }).catch(() => {
              this.editShow.title = false
            })
          } else {
            this.editShow.title = false
          }
        } else {
          this.$message({
            type: 'error',
            message: this.$t('public.pleaseEnterRequireItem')
          })

          this.$nextTick(() => {
            this.$refs.titleInput && this.$refs.titleInput.focus()
          })
        }
      })
    },
    showEditStatus () {
      this.editShow.status = true
      this.editValues.status = this.customer && this.customer.status || ''
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-客户状态快捷修改'])
      this.$nextTick(() => {
        this.$refs.statusSelect.$el.click()
      })
    },
    editStatus () {
      let data = {
        _id: this.customer._id,
        status: this.editValues.status
      }

      this.$store.dispatch('updateCustomerStatus', data).then(() => {
        this.editShow.status = false
        bus.$emit('changeCusStatus')
      })
    },
    showEditOwner () {
      this.editShow.owner = true
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-客户归属快捷修改'])
    },
    handleOwnerChange (obj) {
      this.isOwnerSelectShow = false
      let data = {
        _id: this.customer._id
      }
      utilExtend(data, obj)
      this.$store.dispatch('updateCustomerOwner', data).then(() => {
        bus.$emit('changeCusOwner')
      })
    },
    handleOwnerVisibleChange (visible) {
      // visible select下拉的隐藏时展示归属名
      if (!visible) {
        // 其实这里只要把select组件不显示就行了
        this.editShow.owner = false
      }
    },
    openEditPhoneDialog () {
      this.$refs.editPhoneDialog.open(this.custPhones)
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-客户联系方式快捷修改'])
    },
    calling (command, type) {
      let objReg = new RegExp(/^[0-9]*$/)
      if (!objReg.test(command)) {
        return
      }
      let data = {}
      data.phoneNum = command

      if (type === 'call') {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-客户信息通话'])
        this.$store.dispatch('phoneDialout', data)
      } else {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-客户信息短信'])
        this.$store.commit('call/SET_CALL_NUM', data)
        this.$nextTick(() => {
          document.getElementById('megSms').click()
        })
      }
    },
    editPhoneSubmit (custPhones) {
      let data = {
        _id: this.customer._id,
        phone: custPhones
      }

      this.$store.dispatch('updateCustomerNameDespOrPhone', data).then(() => {
        this.$refs.editPhoneDialog.close(this.custPhones)
      })
    },
    // 联系计划
    contactPlan () {
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-右侧查看联系计划'])
      this.showContactHisory = false
      this.showOperation = false
      this.$emit('openContactPlanSubPanel')
      bus.$emit('refreshContactPlanSubPanel')
    },
    showHistoryFun () {
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-右侧查看联系历史'])
      this.showOperation = false
      this.showContactHisory = !this.showContactHisory
    },
    showOperationFun () {
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-右侧查看操作日志'])
      this.showContactHisory = false
      this.showOperation = !this.showOperation
    },
    hidePopover () {
      this.showContactHisory = false
      this.showOperation = false
    }
  },
  beforeMount () {
    this.fetchData()
    if (isHasFunc('func_sort_phone_bar_send_sms', this.$store.state.session.user)) {
      this.isSMS = true
    }
    let user = this.$store.state.session.user
    if (user.uversion && user.uversion === 'monitor') {
      this.isMonitorVersion = true
    }
  }
}

function validatePhone (rule, value, callback) {
  if (!value || value.length === 0 || !value[0].tel) {
    callback(new Error(rule.message))
  } else {
    callback()
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.base-information-one:before
  content ''
  display table
.base-information-one
  .button-link-group.clearfix:after
    display: block;
  .button-link-group
    line-height 12px
    min-height: 12px;
    margin 12px 0px 0px
    .button-link-item:first-child
      padding-left 0
    .button-link-item:last-child
      border-right none
    .history.button-link-item
      border-right solid 1px $c-main
    .button-link-item
      float left
      border-right solid 1px $c-main
      padding-right 10px
      margin-right 10px
      margin-bottom 7px
      span
        font-size 14px
        color $c-main
        cursor pointer

.information
  padding-top 8px
  border-bottom solid 1px #d9d9d9
  font-size 12px
  .item.clearfix:after
    display: block;
  .item
    position relative
    min-height 24px
    line-height 24px
    padding-left 0px
    .label
      float left
      width 50px
      color $cf-gray3
      line-height 16px
      min-height 16px
      padding-top 4px
      padding-bottom 4px
    .value, .value-input
      color $cf-gray0
      word-wrap break-word
      word-break normal
      margin-left: 93px;
    .value
      position relative
      &>span
        display inline-block
        max-width 100%
        line-height: 16px;
        margin: 4px 0;
      .edit
        // display none
        position absolute
        top 0px
        left -17px
        color $c-main
        cursor pointer
        font-size 12px
      a
        color $c-main
    .value.value-phone
      padding-right 36px
      position relative
      .edit
        margin-top 4px
    .value:hover
      .edit
        display inline

.more-button
  margin 13px 0px
  text-align center
  color $c-main
  cursor pointer
.phone
  padding-right 4px
  .memo
    color $cf-gray3
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  .tel
    i
      font-size 12px
      margin-left 8px
      cursor pointer
      color $cf-level4
    i:hover
      color $c-main
</style>
<style lang="stylus">
@import "./../../../../../assets/common.styl"
  .base-information-one
    .el-input--mini
      .el-input__inner
        height 24px
  .quick-edit-form
    .el-form-item
      margin-bottom 0px
    .el-form-item__content
      line-height inherit
      font-size inherit
  .layout
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation moveWebchatLayout .4s
    @keyframes moveWebchatLayout
      0%
        transform translateX(54%)
      100%
        transform translateX(0)
  .layin
    transform translateX(54%)
    transition transform 0.35s
  .webchat_baseinfo_history,.webchat_baseinfo_operation
    position fixed
    z-index 1998
    right 30px
    top 130px
    bottom 160px
    background $cf-white
    border-left 1px solid #d3d3d3
    overflow-y auto
    overflow-x hidden
    cursor auto
    width 54%
    color $cf-level2
    .el-icon-close
      position absolute
      width 14px
      font-size 14px
      line-height 38px
      cursor pointer
      z-index 2
      right 30px
      font-weight bold
    h4
      display block
      border-bottom 1px solid #d3d3d3
      text-indent 20px
      line-height 42px
</style>

